<script setup>
import { ref } from 'vue'
import { getLoginCode } from '@/api/step'
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast } from 'vant';

const router = useRouter()

const username = ref('')

function onSubmit() {
    getLoginCode(
        {
            tel: username.value
        }
    ).then((res) => {
        console.log(res.data);
        if (res.data.code === '200') {
            showSuccessToast('下一步');
            window.localStorage.setItem('tel', username.value)
            router.push('./step2')
        } else {
            return showFailToast('请输入手机号')
        }

    })
}


</script>
<template>
    <div class="box_big">      
        <div class="box_middle">
            <div>
                <h1>验证手机号</h1>
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="username" name="手机号" label="手机号" placeholder="请输入手机号" />
                    </van-cell-group>
                    <div style="margin: 16px">
                        <van-button round block type="primary" native-type="submit" class="zhuce">
                            验证手机号
                        </van-button>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
h1 {
    margin-top: 50px;
    text-align: center;
}

.van-cell-group {
    border: 1px solid rgb(102, 201, 255);
    width: 300px;
    margin: 0 auto;
}
.box_big {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
    position: relative;

    .box_middle {
        height: 400px;
        width: 80%;
        background-color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 10px 10px 20px hotpink;
        .box_small{
            position: absolute;
            top: 50px;
            .submit{
            width: 250px;
            left: 25px;
        }
        }
        
    }
}
</style>